<template>
  <div class="welcome">
    <div class="header">
      <div class="header-left">
        <el-image
          src="http://thirdqq.qlogo.cn/g?b=oidb&k=eP5FK9vXRqeUg5x3ZCNXMw&s=100&t=1603806485"
        />
        <div class="header-info">
          <div>
            <i class="el-icon-user-solid" />
            <span>༄࿆ྂ锐࿐ิ</span>
          </div>
          <div>
            <i class="el-icon-place" />
            <span>中国·南京</span>
          </div>
        </div>
      </div>
      <div class="header-right">
        <el-card shadow="hover" class="right-card">
          <span>{{ msg }}</span>
          <span>{{ dateMsg }}</span>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, onMounted, ref } from 'vue'
export default {
  name: 'welcome',
  setup() {
    let date = ref(new Date())
    let dateMsg = computed((): string => {
      let years = date.value.getFullYear()
      let month = date.value.getMonth() + 1
      let day = date.value.getDate()
      let h = addZero(date.value.getHours())
      let m = addZero(date.value.getMinutes())
      let s = addZero(date.value.getSeconds())
      return `${years}年${month}月${day}日  ${h}:${m}:${s}`
    })
    let msg = computed((): string => {
      if (date.value.getMinutes() % 3 == 0) {
        return '阳光明媚，祝你薪水翻倍🌞！'
      } else if (date.value.getMinutes() % 2 == 0) {
        return '小风娇好，愿你青春不老😃！'
      } else {
        return '折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！'
      }
    })
    onMounted((): void => {
      setInterval(() => {
        date.value = new Date()
      }, 1000)
    })

    const addZero = (m: any): String => {
      if (m > 0 && m < 10) {
        return '0' + m
      }
      return '' + m
    }

    return {
      date,
      dateMsg,
      msg,
      addZero
    }
  }
}
</script>

<style lang="less" scoped>
.welcome {
  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .header-left {
      display: flex;
      .header-info {
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        i {
          margin-right: 10px;
          color: aqua;
        }
      }
    }
    .header-right {
      align-self: center;
      /deep/.el-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
      }
    }
  }
}
</style>
